<template>
  <div class="add_production_box">
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      :title="'编辑'"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      width="750px"
    >
      <div v-if="formulaParameter && formulaParameter.length !== 0" class="">
        <div class="flex-x flex-right w100" style="margin-bottom: 10px">
          <el-button size="mini" type="primary" @click="addFormula('formName')"
            >添 加</el-button
          >
        </div>
        <div
          class="tab_heng"
          style="overflow: auto !important; max-width: 100%"
          v-init-screen-h="120"
        >
          <mailTable
            :tableData="tableData"
            :tableRows="formulaParameter"
            :tableStyle="{ width: '100%' }"
          ></mailTable>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="submitForm(false)" type="primary"
          >确 定</el-button
        >
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mailTable from "@/views/processRecipe/recipe/mailTable.vue";
export default {
  components: { mailTable },
  props: {
    token: {
      type: String,
      default: "",
    },
    formulaParameter2: {
      type: Array,
      default: () => [],
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      tableData: [],
      formulaParameter: [],
    };
  },
  methods: {
    submitForm() {
      // const formulaParameter = this.setSubArr();
      this.$emit("submitFormJieDuan", _.cloneDeep(this.setSubArr()));
    },
    // 设置最终提交的参数
    setSubArr() {
      let arr = this.tableData.map((item, index) => {
        return {
          orderNum: index + 1,
          values: Object.keys(item).map(function (i) {
            return item[i];
          }),
          keys: this.formulaParameter.map((m, i) => m.key),
          types: this.formulaParameter.map((m, i) => m.type),
          texts: Object.keys(item).map(function (i) {
            return item[i];
          }),
        };
      });
      arr.forEach((item) => {
        this.formulaParameter.forEach((fo) => {
          item.keys.forEach((k, i) => {
            if (k == fo.key && fo.type == 1) {
              item.texts[i] =
                fo.additional.find((add) => add.value == item.texts[i])?.text ||
                "";
            }
          });
        });
      });

      //过滤掉全部为空的
      arr = arr.filter((item) => {
        return !item.values.every((e) => !e);
      });
      return arr;
    },
    // 添加一列
    addFormula() {
      const obj = _.cloneDeep(this.tableData[this.tableData.length - 1]);
      for (const key in obj) {
        obj[key] = "";
      }
      this.tableData.push(obj);
      console.log("obj :>> ", this.tableData[this.tableData.length - 1]);
    },
    //弹窗打开执行操作
    handleOpen() {
      // 拼接成 竖表格可识别参数
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style lang='scss' scoped>
.tab_heng {
  overflow: auto !important;
}
.tab_form {
  /* margin-right: 15px; */
  /deep/ .el-row--flex {
    flex-wrap: wrap;
  }
}
</style>
